<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 清除默认样式css -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 公共样式css -->
    <link rel="stylesheet" href="../css/public.css">
    <!-- 商品列表css -->
    <link rel="stylesheet" href="../css/goods_list.css">
    <!--  商品详情 -->
    <link rel="stylesheet" href="../css/shop_n.css">
    <!-- 引入库类 -->
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div id="head">
        <div class="wrapper">
            <!-- logo -->
            <div class="logo"><img src="../images/logo.jpg" alt=""></div>
            <ul class="nav">
                <!-- 导航 -->
                <a href="../html/index.html"><li>首页</li></a>
                <a href="../html/aboutus.html"><li>关于我们</li></a>
                <a href="../html/brand.html"><li>品牌概念</li></a>
                <a href="../html/goods_list.html" class="on"><li>产品中心
                    <ul>
                        <li>带环类</li>
                        <li>附件类</li>
                        <li>颊管类</li>
                        <li>钳子类</li>
                        <li>设备类</li>
                        <li>丝类</li>
                        <li>托槽类</li>
                    </ul>
                </li></a>
                <a href="../html/news.html"><li>新闻中心</li></a>
                <a href="../html/shop_order.html"><li>产品订购</li></a>
                <a href="../html/contant_us.html"><li>联系我们</li></a>      
            </ul>
            <span><a href="">中文</a>/<a href="">English</a></span>
        </div>
    </div>
    <div id="banner">
        <div class="banner-con">
        </div>
    </div>
    <!-- 主体内容 -->
    <div id="content">
        <div class="content-con clear_fix">

            <!-- 主体左边 -->
            <div class="content_con_left float_left">
                <div class="content_left_list_tit">
                    <h3>产品分类</h3>
                </div>
                <ul class="content_left_list">
                    <!-- <li class="list_border">
                        <a href="javascript:;">托槽类</a>
                    </li>
                     -->
                </ul>
            </div>

            <!-- 主体右边 -->

            <div class="content_con_right float_left">
                <div class="content_con_r_con">
                    <div class="content_right_tit">
                        <h3>产品展示</h3>
                    </div>
                    <div class="content_right_slide">
                        <div class="slide-con">
                            <div class="slide_con_click">
                                <a href="javascript:;" class="float_right">
                                    <p class="float_left"></p>
                                    <span class="float_right">幻灯片</span>
                                </a>
                            </div>

                        </div>
                    </div>
                    <ul class="content_r_goods_list clear_fix">
                        <!-- <li>
                            <a href="javascript:;">
                                <img src="//21206385.s21i.faiusr.com/2/ABUIABACGAAgztSQ8AUoxP-unQIwoAY4oAY!300x300.jpg" alt="">
                                <span>前方牵引装置</span>
                            </a>
                        </li>
                         -->
                    </ul>
                    <!-- 分页 -->
                    <div class="paging">
                        <div class="paging-con flex">
                            <span class="paging-prev">&lt;</span>
                            <ul class="pageing-list flex">
                                <!-- <li class="active">
                                    <span>1</span>
                                </li>
                                <li>
                                    <span>2</span>
                                </li>
                                <li>
                                    <span>3</span>
                                </li> -->
                            </ul>
                            <span class="paging-next">&gt;</span>
                        </div>
                    </div>
                </div>
                <!-- 详情页-商品图片区域 -->
                <div class="shop_n">
                    <!-- 详情页-商品图片区域-版心 -->
                    <div class="shop_con">
                        <!-- 详情页-商品图片区域-左半部份 -->
                        <div class="shop_left"></div>
                        <!-- 详情页-商品图片区域-右半部份 -->
                        <div class="shop_right">
                            <!-- 详情页-商品图片区域-标题 -->
                            <div class="shop_right_title">
                                <div class="shop_right_title_img"></div>
                                <div class="shop_right_title_text">产品详情</div>
                            </div>
                            <!-- 详情页-商品图片区域-中部 -->
                            <div class="shop_right_center">
                                <!-- 详情页-商品图片区域-中部-上半部分 -->
                                <div class="shop_right_center_top">
                                    <!-- 详情页-商品图片区域-中部-上半部分的左侧 -->
                                    <div class="shop_center_top_left">
                                        <!-- 详情页-商品图片区域-中部-上半部分的图片列表 -->
                                        <div class="shop_center_top_left_list">
                                            <div class="shopPrev"></div>
                                            <div class="xun">
                                                <ul class="xun_list">
                                                    <!-- <li class="xun_li">1
                                                        <img src="" alt="">
                                                    </li>
                                                    <li class="xun_li">2</li>
                                                    <li class="xun_li">3</li>
                                                    <li class="xun_li">4</li>
                                                    <li class="xun_li">5</li> -->
                                                </ul>
                                            </div>
                                            <div class="shopNext"></div>
                                        </div>
                                        <!-- 详情页-商品图片区域-中部-上半部分的左侧商品图 -->
                                        <div class="shop_center_top_left_img">
                                            <ul class="img_list">
                                                <li class="img_li">1</li>
                                                <li class="img_li">2</li>
                                                <li class="img_li">3</li>
                                                <li class="img_li">4</li>
                                                <li class="img_li">5</li>
                                            </ul>
                                        </div>
                                        <!-- 详情页-商品图片区域-中部-上半部分的左侧小图标 -->
                                        <div class="shop_center_top_left_ico">
                                            <div class="shop_center_top_left_text" title="分享到">分享到：</div>

                                            <a href="javascript:;" class="ico" title="分享到 微信">
                                                <div class="weixin"></div>
                                            </a>
                                            <a href="javascript:;" class="ico" title="分享到 微博">
                                                <div class="weibo"></div>
                                            </a>
                                            <a href="javascript:;" class="ico" title="分享到 QQ分享">
                                                <div class="qqfen"></div>
                                            </a>
                                            <a href="javascript:;" class="ico" title="分享到 QQ空间">
                                                <div class="qqkong"></div>
                                            </a>
                                            <a href="javascript:;" class="ico" title="分享到 豆瓣网">
                                                <div class="douban"></div>
                                            </a>
                                            <a href="javascript:;" class="ico" title="分享到 百度贴吧">
                                                <div class="baidu"></div>
                                            </a>

                                        </div>
                                    </div>
                                    <!-- 详情页-商品图片区域-中部-上半部分的右侧 -->
                                    <div class="shop_center_top_right">
                                        <div class="shop_center_top_right_name">前方牵引装置</div>
                                        <div class="shop_center_top_right_tel">
                                            <a href="javascript:;" class="right_tel"><img class="right_tel_1"
                                                    src="../images/电话.png" alt="">
                                                0571-82300503</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- 详情页-商品图片区域-中部-下半部分 -->
                                <div class="shop_right_bottom">
                                    <div class="shop_right_bottom_top">
                                        <div class="shop_right_bottom_top_text">产品详情</div>
                                        <div class="shop_right_bottom_img"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="modalBox fixed_center">
        <div class="modalBox-con fixed_center">
            <div class="modalBox_con_close">

            </div>
            <div class="modalBox_main clear_fix">
                <div class="modalBox_main_left float_left">
                    <img src="http://21206385.s21i.faiusr.com/2/ABUIABACGAAg97CW8AUoptSxmAYwkAM4kAM.jpg" alt="">
                </div>
                <div class="modalBox_main_right float_left">
                    <h3>一代自锁</h3>
                </div>
                <a href="javascript:;" class="prevBtn"></a>
                <a href="javascript:;" class="nextBtn"></a>
            </div>
            <div class="modalBox_con_bottom flex">
                <a href="javascript:;" class="prev"></a>
                <ul class="modalBox_main_bottom_list flex">
                    <!-- <li>
                        <a href="javascript:;">
                            <img src="http://21206385.s21i.faiusr.com/2/ABUIABACGAAg97CW8AUokJ_4mwQwkAM4kAM!100x100.jpg" alt="">
                        </a>
                    </li>
                     -->
                </ul>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>

    </div>
    <!-- 底部 -->
    <div id="foot">
        <div class="wrapper">
            <img src="../images/adress.png..webp" alt="">
            <span>杭州市萧山区义桥镇蛟山村108号1B楼</span>
            <img src="../images/phone.png" alt="">
            <span>
                国内业务：0571-82300503<br>出口服务：0571-82304830
            </span>
            <img src="../images/email.png" alt="">
            <span>
                国内业务aosu@mail.hz.zj.cn<br>出口服务as019@126.com
            </span>
            <img src="../images/time.png" alt="">
            <p>9:00-22:00</p>
        </div>
        <br><br>
        <hr>
        <div class="footer">
            <p>©2020 畅邮 版权所有</p>
            <p>技术支持：<a href="">杭州灵品三创网络科技有限公司 </a> | <a href=""> 管理登录</a></p>
        </div>
    </div>
</body>
<script src="../js/page.js"></script>
<script src="../js/shop_n.js"></script>
<script src="../js/lib.js"></script>
<script src="../js/goods_list.js"></script>

</html>